{% extends 'base.html' %}
{% import 'include/macros.html' as macros %}

{% block styles %}
    {{ super() }}
    <link href="{{ static('/css/index.css') }}" rel="stylesheet">
{% endblock %}

{% block page_content %}
    <div class="row">
        {% include 'include/category_nav.html' %}
        <div id="top" class="col-md-offset-2 col-md-8">
            <div id="index-carousel" class="card carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#index-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#index-carousel" data-slide-to="1"></li>
                    <li data-target="#index-carousel" data-slide-to="2"></li>
                    <li data-target="#index-carousel" data-slide-to="3"></li>
                    <li data-target="#index-carousel" data-slide-to="4"></li>
                </ol>
                <div class="carousel-inner">
                    {% for car in carousels %}
                        <div class="item{% if loop.first %} active{% endif %}">
                            <img width="1000" height="400" src="{{ car.image.url }}" alt="{{ car.content }}">
                        </div>
                    {% endfor %}
                </div>
                <a class="carousel-control left" href="#index-carousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control right" href="#index-carousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="index-content">
                <div class="content-newbooks card">
                    <h3>新书上架</h3>
                    {% if new_books is not none %}
                        <div class="row">
                            {% for book in new_books %}
                                {{ macros.bookitem(book,'new'~loop.index) }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="content-hotbooks card">
                    <h3>热销推荐</h3>
                    {% if recommend_hot_books is not none %}
                        <div class="row">
                            {% for book in recommend_hot_books %}
                                {{ macros.bookitem(book,'hot'~loop.index) }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="content-likebooks card">
                    <h3>猜你喜欢（未完成）</h3>
                    {% if hot_books is not none %}
                        <div class="row">
                            {% for book in hot_books %}
                                {{ macros.bookitem(book,'like'~loop.index) }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% include 'include/new_hot_list.html' %}
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ static('/js/index.js') }}"></script>
{% endblock %}